            var box = document.querySelector(".box");
            var index = document.querySelector(".index");
            var btn = document.querySelector(".btn");
			var timeBox=document.querySelector(".timeBox");
			var circle=document.querySelector(".circle")
			var timer;
            btn.addEventListener("click", function() {
            	index.style.transform = "translateX(-100%)";
            });
            function getCircle() {
            	var div = document.createElement("div");
            	var clientH = box.offsetHeight-timeBox.offsetHeight;
            	var clientW = box.offsetWidth;
            	console.log(clientH,clientW)
            	div.style.borderRadius = "50%";
            	div.style.backgroundColor = "#FFFFFF";
            	div.style.position = "absolute";
            	//随机生成球的宽高,且直径不小于15
            	var divWidth = divH = parseInt(Math.random() * 40 + 15);
            	div.style.width = `${divWidth}px`;
            	div.style.height = `${divH}px`;

            	//随机生成top值,left值
            	var divT = parseInt(Math.random() * clientH);
            	var divW = parseInt(Math.random() * clientW);
				console.log(divT,divW);
            	//防止超出屏幕,超出最大Top/left,则让球贴边
            	divT > clientH - divH ? divT = clientH - divH : "";
            	divW > clientW - divWidth ? divW = clientW - divWidth : "";
            	div.style.top = divT + "px";
            	div.style.left = divW + "px";
            	var allBall = document.querySelectorAll(".box div");
            	div.classList.add("lastOne");
            	// console.log(divT,divW);
            	// console.log(div.getBoundingClientRect());
            	circle.appendChild(div);
            	// console.log(div.getBoundingClientRect())
            	return div;
            }
            getCircle();
            var firstBall = document.querySelector(".box div");
            // var transition=document.querySelector(".transition");
            // transition.addEventListener("transitionend",()=>{
            // 	setTimeout(()=>{
            // 		transition.classList.remove("transitionAct");
            // 	},0);	
            // });
            var i = 0;
            box.addEventListener("click", function(event) {
				
            	if (event.target.classList.contains("lastOne")) {
            		++i;
            		var transition = document.querySelector(".transition");
            		transition.innerHTML = `<p>分数:${i}</p>`;
            		transition.style.display = "block";
            		setTimeout(() => {
            			transition.style.transform = "translateX(100%)";
            			// transition.style.transition="all 2.5s";
            			console.log(1)
            		}, 1000);

            		setTimeout(() => {
            			transition.style.transform = "translateX(0)";
            			transition.style.display = "none";
            			console.log(2)
            		}, 2000);
            	}

            	// transition.classList.add("transitionAct");

            	// 判断是否为最后一个,时则创建新圆并进行检测,否则游戏结束	
            	setTimeout(() => {
            		if (event.target.classList.contains("lastOne")) {
            			event.target.classList.remove("lastOne");
            			// console.log("最后一个");
            			var allBall = document.querySelectorAll(".box div");
            			// 通过getCircle的返回值拿到每次新创建,为下一次碰撞检测提供检测对象	
            			var newCircle = getCircle();

            			(function check(target) {
            				allBall.forEach((e, index) => {

            					// 如果新生成的圆与已有的圆碰撞,则移除
            					if (bump(e, target)) {

            						// 1.先移除
            						target.remove();
            						// 2.再创建
            						var newCircle = getCircle();
            						// 3.通过递归传入新创建的圆
            						check(newCircle);
            					}                                       

            				})
            			}(newCircle));

            		}
            	}, 0);
				var time=5;
				clearInterval(timer);
				timer=setInterval(function(){
					time--;
					timeBox.innerHTML = "倒计时："+time;
					if(time==0){
						clearInterval(timer);
						alert("时间到,辣鸡");
						location.reload();
					}
				},1000);
            	if (!event.target.classList.contains("lastOne") && !event.target.classList.contains("box")) {
            		alert("Game Over,辣鸡");
            		location.reload();
            		// return;
            	}
            });

            function bump(obj1, obj2) {
            	//用变量将信息存起来，减少不必要的函数调用，提高性能
            	var obj1Info = obj1.getBoundingClientRect();
            	obj2Info = obj2.getBoundingClientRect();
            	var t1 = obj1Info.top;
            	l1 = obj1Info.left;
            	r1 = obj1Info.right;
            	b1 = obj1Info.bottom;

            	var t2 = obj2Info.top;
            	l2 = obj2Info.left;
            	r2 = obj2Info.right;
            	b2 = obj2Info.bottom;
            	//右1<左2，左1>右2，头1>底2，底1<头2 
            	if (r1 < l2 || l1 > r2 || t1 > b2 || b1 < t2) {
            		// console.log("没有碰到")
            		return false;
            	} else {
            		// console.log("碰到啦")
            		return true;
            	}
            }
